<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="16">
                <el-form-item label="投票事项" prop="vote_name">
                  <el-input v-model="infoForm.vote_name" placeholder="填写投票名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="开始时间" prop="end_time">
                  <el-date-picker type="date"
                                  placeholder="开始时间"
                                  v-model="infoForm.start_time"
                                  :picker-options="pickerOptions1"
                                  format="yyyy-MM-dd"
                                  value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结束时间" prop="end_time">
                  <el-date-picker type="date"
                                  placeholder="结束时间"
                                  v-model="infoForm.end_time"
                                  :picker-options="pickerOptions1"
                                  format="yyyy-MM-dd"
                                  value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="投票选项" prop="option">
                  <div v-for="(item,i) of infoForm.option">
                    <div class="iconlist" v-if="i==0">
                      <el-input v-model="infoForm.option[i]" placeholder="填写投票选项"
                                style="width: 200px;"></el-input>
                      <i class="el-icon-circle-plus-outline iconadd addicon" @click="onAdd"></i>
                    </div>
                    <div class="iconlist" v-else>
                      <el-input v-model="infoForm.option[i]" placeholder="填写投票选项"
                                style="width: 200px;"></el-input>
                      <i class="el-icon-error iconadd detelicon" @click="onDetel(i)"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="其他选项">
                  <el-radio-group v-model="infoForm.is_input">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                  </el-radio-group>
                  <span class="ml-30">(投票人自行输入选项)</span>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="参与投票人" v-if="infoForm.type=='0'">
                  <el-button type="primary" @click="chooseStudent" class="mb-10" size="small" plain>选择投票人</el-button>
                  <el-button @click.native="groupVisible=true" size="small">选择执行群组（多选）</el-button>
                  <div>
                    <el-tag
                            :key="tag.id"
                            v-for="(tag,index) in dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(index)"
                            class="mr-10"
                    >{{tag.realname}}
                    </el-tag>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="4"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" size="small">确认提交</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
              <el-col :span="8"></el-col>
            </el-row>

          </el-form>
        </el-col>
      </el-row>
    </div>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn"  :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
    <!--    选择群组-->
    <groupModule :visible.sync="groupVisible" @studentFn="studentFn"></groupModule>

  </div>
</template>

<script>
  import {yeartime} from '@/assets/js/common'

  export default {
    components: {
    },
    data () {
      return {
        groupVisible:false,
        classVisible: false,
        infoForm: {
          is_input: 0,
          option: [''],
          vote_name: '',
          users: '',
          start_time: yeartime(new Date()),
          end_time: yeartime(new Date()),
          type: '0' // 0 不可 1可以
        },
        // 表单验证
        rules: {
          vote_name: [
            {required: true, message: '填写投票名称', trigger: 'blur'}
          ]
        },
        // 限制时间选择
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
        option: [''],
        studentVisible: false,
        dynamicTags: [],
        dynamicTagsId: [],
        dynamicTagsArray: {}
      }
    },
    mounted () {
    },
    methods: {
      onEditorReady (editor) {
      },
      onAdd () {
        this.infoForm.option.push('')
      },
      onDetel (index) {
        this.infoForm.option.splice(index, 1)
      },
      onSubmit () {
        // 提交 this.$refs.infoForm.validate，这是表单验证
        console.log('数据提交', this.infoForm)
        this.$refs['infoForm'].validate((valid) => {
          console.log('状态：', valid)
          let status = 0
          for (let i in this.infoForm.option) {
            if (!this.infoForm.option[i]) {
              status = 1
            }
          }
          if (status === 1) {
            this.$message({
              message: '投票选项不能为空',
              type: 'error'
            })
            return
          }

          if (!this.dynamicTags.length) {
            this.$message({
              message: '请选择投票人',
              type: 'error'
            })
            return
          }

          if (valid) {
            let data_ = {}
            for (let i in this.infoForm) {
              if (i === 'option') {
                data_[i] = this.infoForm[i].join(',')
              } else {
                data_[i] = this.infoForm[i]
              }
            }
            let users = []
            for (let item of this.dynamicTags) {
              users.push(item.id)
            }
            data_.users = users.join(',')
            this.$post('vote/add', data_).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.infoForm = {
                  name: '',
                  content: '',
                  users: '',
                  type: '0',
                  option: ['']
                }
                this.dynamicTags = []
                this.dynamicTagsArray = {}
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        })
      },
      chooseStudent () {
        let list = {}
        for (let item of this.dynamicTags) {
          list[item.id] = item
        }
        this.dynamicTagsArray = this.getJson(list)
        this.studentVisible = true
      },
      getJson(option){
        return JSON.parse(JSON.stringify(option))
      },
      studentFn (option) {
        let list = [];
        for (let i in option) {
          list.push(option[i])
        }
        this.dynamicTags = this.getJson(list)
      },
      handleClose (index) {
        this.dynamicTags.splice(index, 1)
      }
    }
  }
</script>
<style lang="scss">
  .ql-editor {
    max-height: 250px;
  }

  .el-dialog__body {
    padding: 0 20px;
  }

  .el-radio__label {
    /*display: none;*/
  }

  .warp {
    width: 80%;
    padding: 30px;
    margin: 0 auto;
  }

  .el-dialog__body {
    /*text-align: center;*/
  }

  .el-pagination {
    padding-top: 20px;
  }

  .iconadd {
    cursor: pointer;
    font-size: 20px;
    margin-left: 10px;
  }

  .iconlist {
    margin-bottom: 10px;
  }

  .addicon {

  }

  .detelicon {
    color: red;
  }
</style>
